<template>
    <div class="pkg-count clearfix" :class="[ color ]">
        <span class="del btn btn-mobile fl icon" @click.stop="onChange('del')">&#xe7de;</span>
        <span class="num fl text-normal text-center">{{value}}</span>
        <span class="add btn btn-mobile fl icon" @click.stop="onChange('add')">&#xe848;</span>
    </div>
</template>
<script>
export default {
    name: 'Stepper',
    props: {
        color: {
            type: String,
            default: 'red',
        },
        value: {
            type: Number,
            default: 1,
        },
        canChange: {
            type: Boolean,
        },
        valIndex: {
            type: Number,
            required: true,
        },
    },
    methods: {
        onChange(type) {
            if (type === 'del') {
                if (this.value === 1 && !this.canChange) {
                    wx.showToast({
                        title: '不能再减了。。。',
                        icon: 'none',
                    });
                    return;
                }
                if (this.value === 0) {
                    return;
                }
            }
            this.$emit('change', {
                type,
                index: this.valIndex,
                number: this.value,
            });
        },
    },
    onLoad() {
        this.currentValue = this.value;
    },
};
</script>
<style lang="less">
.pkg-count {
    display: inline-block;
    .del,
    .add {
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        width: 22px;
        height: 22px;
        // line-height: 15px;
        text-align: center;
        // border: 1px solid #FD6270;
        border-radius: 4rpx;
        font-size: 10px;
    }
    .del {
        margin-right: -4rpx;
    }
    .add {
        margin-left: -4rpx;
    }
    .num {
        box-sizing: border-box;
        min-width: 40px;
        height: 22px;
        line-height: 20px;
    }
    .btn {
        color: #ffffff;
    }
    &.blue {
        .num {
            color: #288DF8;
            border-top: 1px solid #288DF8;
            border-bottom: 1px solid #288DF8;
        }
        .btn {
            color: #ffffff;
            background: #288DF8;
        }
    }
    &.red {
        .num {
            color: #f4051a;
            border-top: 1px solid #f4051a;
            border-bottom: 1px solid #f4051a;
        }
        .btn {
            color: #ffffff;
            background: #f4051a;
        }
    }
}
</style>
